<template>
  <div class="orderDevice">
    <el-card>
      <el-button style="margin-bottom:40px" @click="goback">返回</el-button>
      <div class="orderDevice_top" style="margin-bottom:40px">
        下单设备:
        <span v-for="item in deviceTopInfo" :key="item.id">
          {{ item.deviceModelName }} &nbsp; {{ item.goodsNumber }}台
        </span>
      </div>
      <div class="orderDevice_top" style="margin-bottom:40px">
        已选择设备:
        <span v-for="item in deviceTopInfo" :key="item.id">
          {{ item.deviceModelName }} &nbsp; {{ item.nowNumber }}台
        </span>
      </div>
      <div class="orderDevice_top" style="margin-bottom:40px">
        已分发设备:
        <span v-for="item in deviceTopInfo" :key="item.id">
          {{ item.deviceModelName }} &nbsp; {{ item.selectedNumber }}台
        </span>
      </div>
      <el-form :inline="true" :model="orderQuery" class="demo-form-inline">
        <el-form-item label="设备搜索:">
          <el-input
            v-model="orderQuery.deviceInfo"
            placeholder="设备名/设备编号"
            clearable
            @change="handlerordergetDevice"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备类型:">
          <el-select
            v-model="orderQuery.deviceType"
            placeholder="选择设备类型"
            clearable
            @change="handlerordergetDevice"
          >
            <el-option
              v-for="(item, index) in typelist"
              :label="item.name"
              :value="item.typeId"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlerordergetDevice"
            >查询</el-button
          >
        </el-form-item>
        <el-button type="success" @click="handlerFenfa">确定分发</el-button>
      </el-form>
      <el-table
        :data="devicelist"
        border
        style="width: 100%;margin-top:30px;"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="no" label="序号" width="180"> </el-table-column>
        <el-table-column label="设备信息" width="380">
          <template slot-scope="scoped">
            <div>
              设备编号：{{ scoped.row.deviceNumber }} <br />
              设备名称：{{ scoped.row.name }}<br />
              设备类型：{{ scoped.row.deviceTypeName }} <br />
              设备型号：{{ scoped.row.deviceModelName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addPerson" label="录入人"> </el-table-column>
        <el-table-column prop="add_time" label="录入时间"> </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="orderQuery.pageSize"
          :current-page="orderQuery.pageNumber"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          class="management_page"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  orderGetDevice,
  orderSnGetType,
  orderSnBindDevice,
  orderGetNumber
} from "../../utils/api";
export default {
  data() {
    return {
      // 设备列表
      devicelist: [],
      // 搜素数据
      orderQuery: {
        pageNumber: 1,
        pageSize: 10,
        deviceInfo: "",
        deviceType: "",
        deviceModel: "",
        // 订单编号
        orderSn: ""
      },
      // l类型数据
      typelist: [],
      // 被选中的设备
      deviceArr: [],
      // 总数
      count: 0,
      // 订单号
      getNumberOrderSn: "",
      deviceTopInfo: ""
    };
  },
  created() {
    // 获取订单编号
    this.orderQuery.orderSn = window.sessionStorage.getItem("orderSn");
    this.getNumberOrderSn = window.sessionStorage.getItem("orderSn");
    this.handlerordergetDevice();
    this.getdeviceType();
    this.getorderGetNumber();
  },
  methods: {
    // 该订单获取的设备信息
    getorderGetNumber() {
      const params = {
        orderSn: this.getNumberOrderSn
      };
      this.postRequest(orderGetNumber, params).then(res => {
        if (res.code == 200) {
          this.deviceTopInfo = res.data;
        }
      });
    },
    // 订单获取可以绑定的设备
    handlerordergetDevice() {
      this.postRequest(orderGetDevice, this.orderQuery).then(res => {
        if (res.code == 200) {
          this.devicelist = res.data.list;
          this.count = res.data.count;
        }
      });
    },
    //获取设备类型
    getdeviceType() {
      this.postRequest(orderSnGetType, {
        orderSn: this.orderQuery.orderSn
      }).then(res => {
        if (res.code == 200) {
          this.typelist = res.data;
        }
      });
    },
    // 分页
    handleSizeChange(val) {
      this.orderQuery.pageSize = val;
      this.handlerordergetDevice();
    },
    handleCurrentChange(val) {
      this.orderQuery.pageNumber = val;
      this.handlerordergetDevice();
    },
    // 拿到被选中的设备 转换为json
    handleSelectionChange(val) {
      this.deviceTopInfo.forEach(item => {
        item.nowNumber = 0;
        val.forEach(subitem => {
          if (item.deviceType == subitem.deviceType) {
            item.nowNumber++;
          }
        });
      });

      if (val) {
        this.deviceArr = val.map(item => item.deviceId);
        this.deviceArr = JSON.stringify(Array.from(new Set(this.deviceArr)));
      }
    },
    // 点击确认分发
    handlerFenfa() {
      if (this.deviceArr.length == 0) {
        return this.$message.error("请选择分发的设备");
      }
      const params = {
        orderSn: this.orderQuery.orderSn,
        deviceIdList: this.deviceArr
      };
      this.postRequest(orderSnBindDevice, params).then(res => {
        if (res.code == 200) {
          this.$message.success("设备分发成功");
          this.handlerordergetDevice();
          this.getorderGetNumber();
          this.deviceArr = [];
        }
      });
    },
    // 返回上一级
    goback() {
      this.$store.dispatch("delVisitedViews", this.$route).then(obj => {
        this.$router.push("/devicefenfa");
      });
      window.sessionStorage.removeItem("orderSn");
    }
  }
};
</script>

<style lang="less">
.orderDevice {
  .orderDevice_top {
    font-size: 18px;
    color: #000000;
  }
}</style
>>
